<!DOCTYPE html>
<html lang="GB18030" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}" href="css/font-awesome.min.css">
    <link rel="stylesheet" th:href="@{/css/main.css}" href="css/main.css">
    <link rel="stylesheet" th:href="@{/css/doc.min.css}" href="css/doc.min.css">
    <link rel="stylesheet" href="/ztree/zTreeStyle.css">
    <style>
        .tree li {
            list-style-type: none;
            cursor: pointer;
        }
    </style>
</head>

<body>

<div th:replace="/common/top::navigation"></div>
<div class="container-fluid">
    <div class="row">

        <div th:replace="common/left::leftsidebar('/role/rolePage/')"></div>

        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading"><i class="glyphicon glyphicon-th-list"></i> 权限菜单列表
                    <div style="float:right;cursor:pointer;" data-toggle="modal" data-target="#myModal"><i
                            class="glyphicon glyphicon-question-sign"></i></div>
                </div>

                <input type="hidden" id="roleId" th:value="${roleId}">

                <div class="panel-body">
                    <button onclick="assignPermission()" class="btn btn-success">分配许可</button>
                    <br><br>
                    <ul id="permisssionTree" class="ztree"></ul>
                </div>
            </div>
        </div>

    </div>
</div>

<script th:src="@{/webjars/jquery/3.3.1/jquery.js}" src="jquery/jquery-2.1.1.min.js"></script>
<script th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.js}" src="bootstrap/js/bootstrap.min.js"></script>
<script th:src="@{/script/docs.min.js}" src="script/docs.min.js"></script>
<script src="/ztree/jquery.ztree.all-3.5.min.js"></script>
<script th:src="@{/webjars/github-com-sentsin-layer/3.0.3/src/layer.js}"></script>
<script type="text/javascript">
    $(function () {
        $(".list-group-item").click(function () {
            if ($(this).find("ul")) {
                $(this).toggleClass("tree-closed");
                if ($(this).hasClass("tree-closed")) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
        var setting = {
            check: {
                enable: true
            },
            view: {
                selectedMulti: false,
                addDiyDom: function (treeId, treeNode) {
                    var icoObj = $("#" + treeNode.tId + "_ico"); // tId = permissionTree_1, $("#permissionTree_1_ico")
                    if (treeNode.iconClass) {
                        icoObj.removeClass("button ico_docu ico_open").addClass(treeNode.iconClass).css("background", "");
                    }
                },
            },
            async: {
                enable: true,
                url: "/permission/queryAllPermission?roleId=" + $("#roleId").val(),
                autoParam: ["id", "name=n", "level=lv"]
            }
        };
        $.fn.zTree.init($("#permisssionTree"), setting);
    });


    //分配 许可
    function assignPermission() {
        var treeObj = $.fn.zTree.getZTreeObj("permisssionTree");
        var nodes = treeObj.getCheckedNodes(true);
        if (nodes.length <= 0) {
            layer.msg("请先选择需要分配的许可", {time: 1200, icon: 0, anim: 6});
        } else {
            var data = "roleId=" + $("#roleId").val();
            $.each(nodes, function (i, node) {
                data += "&permissionIds=" + node.id;
            })
            var index;
            $.ajax({
                type: "post",
                url: "/role/assignRolePermission",
                data: data,
                beforeSend: function () {
                    index = layer.load();
                },
                success: function (result) {
                    layer.close(index);
                    if (result.success) {
                        if (result.code == 0) {
                            layer.msg("分配许可成功,请重新登录", function () {
                                window.location.href = "/role/rolePage";
                            });
                        } else {
                            layer.msg("分配许可成功", function () {
                                window.location.href = "/role/rolePage";
                            });
                        }


                    } else {
                        layer.msg("分配许可失败");
                    }
                }
            });
        }


    }

</script>
</body>
</html>
